<template>
	<view class="goodlist" v-if="dataBuffer">
		<!-- head区域 -->
		<view class="head">
			<view class="search">
				<u-search 
					:disabled="true"
					@click="goSearch"
					shape="square"
					:show-action="true" 
					action-text="搜索" 
					:animation="true" 
					margin="10rpx 0rpx">
				</u-search>
			</view>
			<view class="sortbox">
				<view  class="sort">
					<view hover-class="touchOpacity">综合排序</view>
					<view hover-class="touchOpacity">销量</view>
					<view hover-class="touchOpacity" @click="pricesort">
						<text>价格</text>
						<image src="../../static/icon/sort.png"></image>
					</view>
					<view hover-class="touchOpacity">好评度</view>
					<view hover-class="touchOpacity">店铺</view>
				</view>	
				<view class="filter" hover-class="touchOpacity">
					<image src="../../static/icon/filter.png"></image>
					<text>筛选</text>
				</view>
			</view>
			
		</view>

		<!-- 提示标语区域 -->
		<view class="biaoyu" hover-class="touchOpacity">
			<u-notice-bar mode="vertical" :list="list"  :show="true" :close-icon="true"></u-notice-bar>
		</view>
		
		<!-- 商品列表区域 -->
		<view class="list" >
			<view 
				class="row" 
				v-for="(item,index) in goodlist" 
				:key="index" 
				@click="goDesc(item.id)"
			>
				<!-- 执行图片赖加载 此处注意百度小程序问题需要指定固定高度-->
				<view class="image">
					<u-lazy-load :key="index" :image="item.img" height="218"></u-lazy-load>
				</view>
				<view class="info" hover-class="touchOpacity">
					<text>{{item.goodsname}}</text>	
					<view class="money">
						<text>￥  {{item.price}}</text> <text>￥{{item.market_price}}</text>
					</view>
					<text>双11.11限制200起</text>
					<text space="ensp">3565评论   99%好评</text>	
				</view>
			</view>
		</view>
		
		<!-- 底部悬浮球 -->
		<view 
			v-if="topBuffer"
			class="quick_top" 
			hover-class="touchOpacity"
			@click="goTop"
		>
			<image src="../../static/icon/totop.png"></image>
		</view>
	</view>
	<view v-else>
		<!-- 无数据提示 -->
		<u-empty 
			text="暂无数据~~去逛逛~~" mode="list" 
			:show="!dataBuffer" 
			color="orange" icon-color="orange"
		></u-empty>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				cateid:"",//商品分类id
				type:1,//商品分类类型 1|2 
				page:1,//页码
				size:6,//分页偏移量
				totalPage:0,//总页码数
				value2:'',
				list: [
					'筛选11.11大促商品,亲,请速速赶来',
					'筛选11.11大促商品,亲,请速速赶来',
				],
				show: false,
				mode: 'right',
				mask: true, // 是否显示遮罩
				closeable: true,
				closeIconPos: 'top-right',
				topBuffer:false,//控制悬浮球显示
				dataBuffer:true,
				goodlist:[
					{id:1001,goodsname:'下发水',img:'../../static/img/pic/commodity/01.png'},
					{id:1002,goodsname:'下发水',img:'../../static/img/pic/commodity/02.png'},
					{id:1003,goodsname:'下发水',img:'../../static/img/pic/commodity/03.png'},
					{id:1004,goodsname:'下发水',img:'../../static/img/pic/commodity/04.png'},
					{id:1005,goodsname:'下发水',img:'../../static/img/pic/commodity/05.png'}
				]
			}
		},
		onLoad(option){
			// this.$tool.load('数据加载中...')
			// 获取分类id和分类类型
			this.cateid = option.cateid
			console.log(this.cateid)
			this.type = option.type
			this.getlist()
		},
		// 设页面滚动函数置监听
		onPageScroll(info){
			if(info.scrollTop > 200){
				this.topBuffer=true
			}else{
				this.topBuffer=false
			}
		},
		// 设置监听下拉刷新的函数
		onPullDownRefresh(){
					console.log(111)
					// 刷新原理：
						// 分页思想 最新的数据往往在第一页 page=1 赋空旧的数据
					// this.$tool.load('数据更新中...')
					// setTimeout(()=>{
					// 	this.page = 1;
					// 	this.goodlist = [];
					// 	this.getList();
					// },1000)
		},
		// 设置监听上拉加载的函数
		onReachBottom(){
			if(this.page < this.totalPage){
				this.$tool.load('数据拉取中...')
				setTimeout(()=>{
					++this.page;
					his.getList();
				},3000)
			}else{
				this.$tool.tip('没有更多了！') 
			}
		},
		methods: {
			// 跳转到搜索页面
			// goSearch(){
			// },
			// 价格筛选事件
			// pricesort(){
			// 	uni.showActionSheet({
			// 		itemList:['升序','降序']
			// 	})
			// },
			
			// 跳转到商品的详情页面
						goDesc(id){
							uni.navigateTo({
								url:"../gooddesc/gooddesc?id="+id
							})
						},
			// 快速置顶
			goTop(){
					uni.pageScrollTo({
					scrollTop:0,//滚动到页面顶部的位置
					duration:10//置顶动画时长
				})
			},
			//获取商品列表数据
			getlist(){
				this.$http({
					url:'getgoodlist',
					data:{
						cateid:this.cateid,
						type:this.type,
						page:this.page,
						size:this.size
					}
				})
				.then(res=>{
					console.log(res.list)
					let {totalPage,goodData} = res.list ;
					if(goodData==null){
						this.dataBuffer=false
						console.log(111)
					}else{
						this.dataBuffer=true
						goodData.forEach(item=>item.img=this.$url+item.img)
                       // 赋值数据给页面 新旧数据拼接 concat
						this.goodlist = this.goodlist.concat(goodData);
						// 赋值总页码数
						this.totalPage = totalPage
						
						console.log(this.goodlist)
					}
				})
				.catch(err=>console.log(err))
			}
			
			
			
			
		}
		
		
	}
</script>

<style>
	/* 引入样式 */
	@import url("@/static/css/goodlist.css");
</style>
